<template>
  <view class="">
    <u-form-item
      :label="item.label"
      borderBottom
      ref="item1"
      :prop="item.value"
    >
      <!-- <view  >{{ inputValue }}</view> -->
      <view
        @click="!disabled && (show = true)"
        style="flex: 1; padding: 0"
        ref="formitem"
        >{{ inputValue }}</view
      >
      <!-- :class="[value ? 'uni-input-input' : 'select-wrap']" -->
    </u-form-item>
    <u-action-sheet
      :actions="list"
      :show="show"
      cancelText="取消"
      @select="select"
      @close="show = false"
    ></u-action-sheet>
  </view>
</template>

<script>
export default {
  inject: {
    uForm: {
      default: () => ({}),
    },
  },
  data() {
    return {
      // inputValue: "",
      show: false,
    };
  },
  computed: {
    disabled() {
      return this.uForm.disabled;
    },
    list() {
      return this.item.option.map((e) => {
        return {
          ...e,
          name: e.label,
        };
      });
    },
    inputValue() {
      return (
        this.item.option.find((e) => e.value == this.value)?.label || "请选择"
      );
    },
  },
  props: {
    item: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    data: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    value: {
      typeof: [String, Number, Boolean, Array, Object],
      default: () => {
        return "";
      },
    },
  },

  methods: {
    blur() {
      this.$emit("input", this.inputValue);
      uni.$u.formValidate(this.$refs.formitem, "blur");
    },
    select(e) {
      // console.log(e);
      this.$emit("input", String(e.value));
      uni.$u.formValidate(this.$refs.formitem, "blur");
      this.show = false;
      let dqitem = this.list.find((e2) => {
        return String(e2.value) == String(e.value);
      });
      if (this.item.onChange) {
        console.log(dqitem);
        this.item.onChange.call(this, {
          emit: this.$emit,
          activeOption: dqitem,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.uni-input-input {
  font-size: 14px !important;
  color: #171a1d !important;
  line-height: 99rpx !important;
  height: 99rpx !important;
  padding-left: 10px;
}

.uni-forms-item__label {
  margin-left: 0;
  font-size: 14px !important;
  color: #171a1d !important;
  line-height: 99rpx !important;
  height: 99rpx !important;
}
</style>
